<template>
    <div class="login">
        <div class="login-form">
            <h2>王发发管理系统</h2>
            <el-form ref="ruleFormRef" :model="loginForm" status-icon label-width="120px" class="demo-loginForm">
                <el-form-item label="账号" prop="pass">
                    <el-input v-model="loginForm.name" />
                </el-form-item>
                <el-form-item label="密码" prop="checkPass">
                    <el-input v-model="loginForm.password" type="password" />
                </el-form-item>
            </el-form>
            <div class="bottom">
                <el-button type="primary" @click="Login">登 录</el-button>
            </div>
            <div class="prompt">
                <div>账号:wff</div>
                <div>密码:123456</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import axios from '@/netWork';
const router = useRouter();
const data: any = reactive({
    loginForm: {}
});
let { loginForm } = toRefs(data);
function Login(): void {
    axios({
        url: '/login',
        method: 'POST',
        data: data.loginForm
    }).then((res: any) => {
        if (res.code === 200) {
            ElMessage({
                message: '登录成功',
                type: 'success'
            });
            localStorage.setItem('token', res.token);
            router.push('/');
        } else {
            ElMessage({
                message: res.data,
                type: 'error'
            });
        }
    });
}
</script>

<style scoped lang="scss">
.login {
    height: 100vh;
    background: url('https://img1.baidu.com/it/u=154291732,4006939900&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664298000&t=a6e36d5c3f55a952d1984d1793d22e0b');
    background-size: 100% 100%;
    .login-form {
        width: 500px;
        height: 300px;
        background: #fff;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -60%);
        h2 {
            text-align: center;
            color: #409eff;
            margin-bottom: 40px;
            padding-top: 20px;
        }
        .el-input {
            width: 300px;
        }
        .bottom {
            width: 340px;
            margin: 0 auto;
            margin-top: 30px;
            .el-button {
                width: 100%;
            }
        }
        .prompt {
            display: flex;
            justify-content: space-between;
            width: 340px;
            margin: 10px auto;
            font-size: 14px;
            color: gray;
        }
    }
}
</style>
